Rodrigo

Hi, You can borrow some of the logic in this demo: https://codepen.io/GreenSock/pen/jOQXYzV Hopefully this helps. Happy Tweening!

Hi @Wardo and welcome to the GSAP Forums! If you have the regular GSAP version installed before upgrading to the bonus tier, you could delete your package-lock.json file locally and push to your repo in order to trigger a deploy and see if that helps. Finally thanks for being a GSAP Club member and supporting GSAP! 💚 Hopefully this helps. Happy Tweening!

Hi, As Mitchel mentions is super hard for us to do much without a working demo, so checking our Stackblitz collections (the NextJS one) should be a very good first step. Finally I'm curious about this: tl_slide.from(el[1].current, { x: -100, // opacity: 0, }) Those elements you are animating there are the same ones that have these styles applied to them? .el { display: flex; flex-direction: column; border-radius: 8px; transition: all 0.35s ease; padding: 40px; &:nth-child(1) { padding: 40px; } Animating an element that has CSS transition all with GSAP is generally a bad idea as Jack explains here: Hopefully this helps. Happy Tweening!

Hi, The main issue here is that you're pinning an element whose height is not the height of the viewport: .service-slider_wrapper { overflow: hidden; max-height: 500px !important; } const slider = document.querySelector(".service-slider_wrapper"); const pin = gsap.to(rightSections, { yPercent: -100 * (rightSections.length - 1), ease: "none", scrollTrigger: { trigger: slider, pin: true, invalidateOnRefresh: true, start: "center center-=100", scrub: 1, end: () => "+=" + (slider.offsetHeight || 0), markers: false } }); Because of the way pinning works, that creates the extra space after that element. The solution is to wrap that element and the next with an extra element and pin that one: <div class="pin-wrapper"> <div class="roadmap-sec"> </div> <div class="bottom"></div> </div> const pin = gsap.to(rightSections, { yPercent: -100 * (rightSections.length - 1), ease: "none", scrollTrigger: { trigger: slider, pin: ".pin-wrapper", invalidateOnRefresh: true, start: "center center-=100", scrub: 1, end: () => "+=" + (slider.offsetHeight || 0), markers: true } }); Here is a fork of your demo: https://codepen.io/GreenSock/pen/PovZoRv Hopefully this helps. Happy Tweening!

Hi, There is nothing wrong with passing a prop to a child and there is nothing wrong to import GSAP and create a GSAP Context instance on every component, especially if the component could be unmounted before the parent. Honestly I prefer to import GSAP and create a Context instance on every component, you'll hardly see any dip in performance with that approach. Finally there is no need to store the GSAP Context instance on a ref and make it a reactive property, since I can't think of a reason to track updates to a GSAP Context instance on a Vue component, just use a variable: let ctx; onMounted(() => { ctx = gsap.context(); }); onUnmounted(() => { ctx && ctx.revert(); }); Hopefully this helps. Happy Tweening!

Are you using that approach in your layout file in astro? In your demo I don't see that. That basically seems to be something Astro is doing behind the scenes. ScrollSmoother works without any issues with Next, Nuxt, SvelteKit and other SSR systems. If with that approach it doesn't work honestly IDK what to tell you. Sorry I can't be of more assistance. Happy Tweening!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/mdYeGQr Hopefully this helps. Happy Tweening!

Hi, Maybe these demos can help: https://codepen.io/GreenSock/pen/BamxvZW https://codepen.io/GreenSock/pen/qBryorx Hopefully this helps. Happy Tweening!

I know, the idea is a way to enable/disable or destroy/create the ScrollSmoother instance on a route change. My objective is to share that particular approach, give you an idea of how to proceed: import ScrollTrigger from "gsap-trial/ScrollTrigger"; import ScrollSmoother from "gsap-trial/ScrollSmoother"; import {gsap} from "gsap" gsap.registerPlugin(ScrollTrigger, ScrollSmoother); const constructScroller = () => { ScrollSmoother.create({ smooth: 1 }) } document.addEventListener("astro:page-load", constructScroller) document.addEventListener("DOMContentLoaded", constructScroller); Hopefully this helps. Happy Tweening!

Hi, Your demo is not using ScrollTrigger, so I don't really know what you're trying to do here and how to implement Observer in your demo. You only have a Tween using the ScrollTo Plugin, so you can pause that tween and then resume it. Happy Tweening!

Hi, The main concept in my demo is this: const createTween = () => { t && t.kill(); t = gsap .to(".box", { x: () => window.innerWidth - 20 - 75, // paddings & box width duration: 5, ease: "none" }) .seek(2.5) .timeScale(0); if (typeof currentProgress !== "undefined") { t.progress(currentProgress); } }; Basically you kill the instance (if is defined) and then, if the progress has been stored, you set the progress of the new instance. The key in the animation is getting the x value correctly based on the screen width and the width of the element. Hopefully this helps. Happy Tweening!

Hi, The video link is going 404, so there is nothing to see there. The only thing is that something else is creating an issue, unfortunately without a minimal demo that clearly illustrates the issue is really hard for us to find the problem. On top of that I strongly recommend you to not animate the same element you're using as a trigger and pin on ScrollTrigger: gsap.to("#voting", { scrollTrigger: { trigger: "#voting", pin: "#voting", start: "top top", end: "bottom top", }, }); Here you can find our React and Next collections in Stackblitz: https://stackblitz.com/@gsap-dev/collections/gsap-react-starters https://stackblitz.com/@gsap-dev/collections/gsap-nextjs-starters Hopefully this helps. Happy Tweening!

Hi, Yeah that's just the way browsers work in this sense. What you can try is to wrap everything in an extra element and use Flip or just get the height of the element once you filtered the elements. Just create concurrent Flip instances. Maybe something like this: https://codepen.io/GreenSock/pen/MWdaXxY Hopefully this helps. Happy Tweening!

Hi, We've seen a lot of use for the Seamless Loop helper functions: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/ The Utility methods are well... super helpful and can make your life a lot easier: https://gsap.com/docs/v3/GSAP/UtilityMethods Also you should experiment with advanced Staggers, there are very powerful options there: https://gsap.com/resources/getting-started/Staggers @Carl has a series of videos and demos with staggers: Finally, last but not least follow @PointC and check his tutorials: https://www.motiontricks.com/ Happy Tweening!

Hi @ParkerFloyd, If you have a question regarding this particular thread, you can create a minimal demo that illustrates the issue you're having. You can fork this starter template from our Codepen collection: https://codepen.io/GreenSock/pen/aYYOdN Happy Tweening!